<template>
  <div>
    <el-tabs
      v-model="templateType"
      editable
      @tab-add="handleTabAdd"
    >
      <template #addIcon>
        <el-button type="primary" plain>添加模板</el-button>
      </template>
      <el-tab-pane label="密码模板" name="pwd">
        <el-table :data="pwdList">
          <el-table-column label="模板名称" prop="title"></el-table-column>
          <el-table-column label="添加者" prop="creatorUsername"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="primary" link @click="handlePreview(row)">预览</el-button>
              <el-button type="primary" link @click="handlePwdRemove(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="电子钥匙模板" name="key">
        <el-table :data="keyList">
          <el-table-column label="模板名称" prop="title"></el-table-column>
          <el-table-column label="添加者" prop="creatorUsername"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="primary" link @click="handlePreview(row)">预览</el-button>
              <el-button type="primary" link @click="handlePwdRemove(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="催缴模板" name="press">
        <el-table :data="pressList">
          <el-table-column label="模板名称" prop="title"></el-table-column>
          <el-table-column label="添加者" prop="creatorUsername"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="primary" link @click="handlePreview(row)">预览</el-button>
              <el-button type="primary" link @click="handlePwdRemove(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <TemplateDl
      :type="templateType"
      ref="templateDl"
      @success="handleAddSuccess"
    />
    <PreviewDl
      :type="templateType"
      :form="selectRow"
      ref="previewDl"
    />
  </div>
</template>
<script setup name="Message">
import TemplateDl from "./templateDl.vue";
import PreviewDl from './previewDl.vue'

const { proxy } = getCurrentInstance()

const templateType = ref('pwd')
const pwdList = ref([{
  title: '密码模板',
  start: '您好：',
  dateFlag: true,
  end: '输入密码后请按#号键或其他开锁键结束。',
}])
const keyList = ref([])
const pressList = ref([])
const selectRow = ref({})

/* 添加模板 */
function handleTabAdd() {
  proxy.$refs['templateDl'].show()
}

/* 预览 */
function handlePreview(row) {
  selectRow.value = row
  proxy.$refs['previewDl'].show()
}

/* 删除 */
function handlePwdRemove(row) {
  
}

/* 添加模板成功 */
function handleAddSuccess(type) {
  switch (type) {
    case 'pwd':
      getPwdList()
      break;
    case 'key':
      getKeyList()
      break;
    case 'press':
      getPressList()
      break;
    default:
      break;
  }
}
/* 获取密码模板列表 */
function getPwdList() {}
/* 获取电子钥匙模板列表 */
function getKeyList() {}
/* 获取催缴模板列表 */
function getPressList() {}

</script>

<style lang="scss" scoped>
:deep(.el-tabs) {
  width: 700px;
  .is-icon-close {
    display: none !important;
  }
  .el-tabs__item {
    padding: 0 20px!important;
  }
  .el-tabs__new-tab {
    width: 64px;
    position: absolute;
    right: 12px;
    z-index: 1;
  }
}
</style>